<template>
  <div class="mt-6 max-width" style="width: 327px">
    <v-card-title class="justify-space-between">
      <div class="subtitle-1">
        <v-icon small color="blue darken-2">mdi-dialpad</v-icon>
        文章分类
      </div>
      <div>
        <v-tooltip top>
          <template v-slot:activator="{ on }">
            <v-btn text v-on="on">
              <v-icon small color="blue darken-2">mdi-dots-horizontal</v-icon>
            </v-btn>
          </template>
          <span>所有类别</span>
        </v-tooltip>
      </div>
    </v-card-title>
    <v-list dense>
      <v-list-item-group
        v-if="typeList && typeList.length>0"
        v-model="currentType"
        color="indigo"
      >
        <v-list-item
          v-for="type in typeList"
          :key="type.id"
          @click="loadBlogByType(type)"
        >
          <v-list-item-icon>
            <v-icon v-text="type.icon" />
          </v-list-item-icon>

          <v-list-item-content>
            <v-list-item-title class="text-left" v-text="type.name" />
          </v-list-item-content>
        </v-list-item>
      </v-list-item-group>
      <v-list-item-group v-else>
        <v-card-text>
          您没有博客类型..
        </v-card-text>
      </v-list-item-group>
    </v-list>
  </div>
</template>

<script>
import { getTypeList } from '@/api/blog'
import '@/assets/css/business/blog/board/board.scss'
import { mixin } from '@/utils/mixin'

export default {
  name: 'TypeBoard',
  mixins: [mixin],
  data: () => ({
    typeList: []
  }),
  created() {
    this.getTypeList()
  },
  methods: {
    getTypeList() {
      // 请求后台
      getTypeList().then(res => {
        const result = res.data
        if (res && res.code === 200) {
          this.typeList.push(...result)
        }
      }).catch(function(e) {
        // console.log('加载类型列表失败', e)
      })
    },
    loadBlogByType(type) {
      // 当前选中的博客类型--存储到store中
      this.$store.commit('setBlogType', type.id)
    }
  }
}
</script>

<style scoped>

</style>
